<script setup lang="ts">

import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
import {isCollapse} from "../layout/isCollapse.ts";
</script>

<template>
  <el-header>
    <el-icon @click="isCollapse=!isCollapse">
      <Expand v-show="isCollapse"/>
      <Fold v-show="!isCollapse"/>
    </el-icon>

    <!--    Breadcrumb-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/">promotion management</a></el-breadcrumb-item
      >
    </el-breadcrumb>

    <!--    Dropdown-->
    <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar :size="28" :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"/>
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>用户姓名</el-dropdown-item>
          <el-dropdown-item divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<style scoped lang="scss">
.el-header {
  display: flex;
  align-items: center;
  background: ghostwhite;

  .el-dropdown {
    margin-left: auto;
  }
}
</style>